<template>
  <view class="suggested m-t30">
    <text class="label p-l24 text-700-132">名企推荐</text>

    <scroll-view scrollX="true" :showScrollbar="false">
      <view class="flex p-h24">
        <view
          v-for="(item, index) in companys"
          :key="index"
          class="flex-d-c m-r20"
          :data-url="`pages/office/firm/firm?id=${item.id}`"
          @click="goto">
          <image class="cover" :src="genStaticUrl(item.images.split(',')[0])" mode="aspectFill" />
          <text class="m-t16 text-500-126">{{ item.title }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue'
  import type { FamousCompany } from '@/types/api.d.ts'
  import { genStaticUrl } from '@/utils/utils'
  import { useNavigator } from '@/hooks/use-navigator'

  const companys = ref<FamousCompany[]>([])

  const { goto } = useNavigator()

  onMounted(() => {
    getCompany()
  })

  const getCompany = async () => {
    const params = {}

    const res = await uni.$u.get<FamousCompany[]>('/company/ming', params)

    if (res.code == 1) {
      companys.value = res.data
    }
  }
</script>

<style lang="scss" scoped>
	.suggested {
		width: 100%;
		height: 300rpx;
		border-radius: 20rpx;
		background-color: $bg-color-1;
	}

	.label {
		line-height: 94rpx;
	}

	.cover {
		width: 227rpx;
		height: 126rpx;
		border-radius: 14rpx;
	}
</style>
